<template>
  <div
    class="gb-card"
    :class="{
      'gb-card-border': border,
      'gb-card-shadow': shadow,
      'gb-card-info--after': labelType || tip
    }"
    :style="{ 'border-left-color': color }"
    @click="$emit('click')"
  >
    <!-- S 提醒 -->
    <div class="gb-card-remind" v-if="remind">
      <van-icon name="warning-o" />
      {{ remindText }}
    </div>
    <!-- E 提醒 -->

    <!-- S 标签（气泡） -->
    <span
      class="gb-card-label--bubble"
      v-if="labelType === 'bubble'"
      :style="{
        'background-image': `url(${require(`@/assets/images/event/event_record_tag_${color.substr(1)}@2x.png`)})`
      }"
    >
      {{ labelText }}
    </span>
    <!-- E 标签（气泡） -->

    <!-- S 标签（实心） -->
    <span class="gb-card-label--solid van-ellipsis" v-if="labelType === 'solid'" :style="{ background: color }">
      {{ labelText }}
    </span>
    <!-- E 标签（实心） -->

    <!-- S 标签（朴素） -->
    <span
      class="gb-card-label--plain van-ellipsis"
      v-if="labelType === 'plain'"
      :style="{ color, 'border-color': color }"
    >
      {{ labelText }}
    </span>
    <!-- E 标签（朴素） -->

    <!-- S 主体 -->
    <slot></slot>
    <!-- E 主体 -->

    <!-- S Footer（按钮） -->
    <div class="gb-card-footer" align="right" v-if="$slots.button && $slots.button.length">
      <slot name="button"></slot>
    </div>
    <!-- E Footer（按钮） -->

    <!-- S 文字提示 -->
    <span class="gb-card-tip" v-if="tip">
      {{ tipText }}
    </span>
    <!-- E 文字提示 -->

    <!-- S 图标戳 -->
    <span class="gb-card-affix" v-if="affixIcon">
      <img :src="affixIcon" alt="" class="gb-card-affix--icon" />
    </span>
    <!-- E 图标戳 -->
  </div>
</template>
<script>
export default {
  props: {
    color: {
      type: String,
      default: '#3CBDD0'
    },
    border: {
      type: Boolean,
      default: false
    },
    shadow: {
      type: Boolean,
      default: false
    },
    labelType: {
      type: String,
      default: ''
    },
    labelText: {
      type: String
    },
    remind: {
      type: Boolean,
      default: false
    },
    remindText: {
      type: String,
      default: '即将超时'
    },
    tip: {
      type: Boolean,
      default: false
    },
    tipText: {
      type: String
    },
    affixIcon: {
      type: String
    }
  }
}
</script>
<style lang="less">
@import '~@/assets/style/base/color.less';
.gb-card {
  position: relative;
  border-radius: 8px;
  background-color: #ffffff;
  overflow: hidden;
  &-info {
    display: flex;
    font-size: 28px;
    padding: 16px 0;
    &__label {
      width: 170px;
      margin-right: 32px;
      line-height: 28px;
      color: rgba(0, 0, 0, 0.54);
    }
    &__value {
      width: 100px;
      flex: auto;
      line-height: 32px;
      &.blue {
        color: @blue;
      }
    }
  }
  &-dl {
    overflow: hidden;
    dt {
      float: left;
      margin-top: 16px;
      margin-right: 32px;
      img {
        width: 152px;
        height: 152px;
        object-fit: cover;
      }
    }
  }
  /*&-label--align-right {*/
  /*  .gb-card-info__label {*/
  /*    width: 170px;*/
  /*    text-align: right;*/
  /*  }*/
  /*}*/
  &-info--after {
    .gb-card-info:first-child {
      &::after {
        content: ' ';
        width: 120px;
      }
    }
  }
}
.gb-card-border {
  border-left: 8px solid @blue;
}
.gb-card-shadow {
  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.05);
}
.gb-card-footer {
  margin-bottom: 16px;
}
.gb-card-label {
  &--bubble {
    position: absolute;
    right: 32px;
    display: inline-block;
    width: 98px;
    height: 52px;
    line-height: 52px;
    color: #ffffff;
    text-align: center;
    font-size: 22px;
    background-image: url('~@/assets/images/event/event_record_tag_3CBDD0@2x.png');
    background-repeat: no-repeat;
    background-size: 98px auto;
  }
  &--solid {
    position: absolute;
    right: 0;
    top: 32px;
    display: inline-block;
    width: 128px;
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    background: @blue;
    border-radius: 56px 0px 0px 56px;
  }
  &--plain {
    position: absolute;
    top: 32px;
    right: 32px;
    display: inline-block;
    max-width: 180px;
    height: 44px;
    padding: 0 16px;
    line-height: 44px;
    font-size: 24px;
    border-radius: 4px;
    color: @blue;
    border: 1px solid @blue;
    background-color: #ffffff;
    // background: fade(@blue, 10%);
  }
}
.gb-card-remind {
  position: relative;
  top: -16px;
  height: 40px;
  margin-left: -32px;
  margin-right: -32px;
  line-height: 40px;
  font-size: 22px;
  text-align: center;
  color: @red;
  background: linear-gradient(0deg, rgba(243, 143, 143, 0) 0%, rgba(226, 86, 86, 0.3) 100%);
  border-radius: 0 8px 0 0;
  .van-icon {
    position: relative;
    top: 2px;
  }
}
.gb-card-tip {
  position: absolute;
  right: 16px;
  top: 90px;
  font-size: 24px;
  color: @red;
}
.gb-card-affix {
  position: absolute;
  right: -16px;
  bottom: -16px;
  &--icon {
    width: 92px;
  }
}
</style>
